import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form, Modal, Radio, message } from 'antd';
import { formatMessage, FormattedMessage } from 'umi/locale';
import ProductFunctionProp from '../prop';
import ProductFunctionEvent from '../event';
import ProductFunctionService from '../service';

const FormItem = Form.Item;

@connect(({ product, loading }) => ({
  product,
  loading: loading.models.product,
}))
@Form.create()
class ProductFunctionForm extends PureComponent {
  render() {
    const {
      modalVisible,
      showFormIndex,
      form,
      handleModalVisible,
      handleShowFormIndex,
    } = this.props;

    const handleSizeChange = e => {
      handleShowFormIndex(e.target.value);
    };

    const handleAdd = (type, fieldsValue, childForm) => {
      const { dispatch, params } = this.props;
      if (type === '1') {
        if (
          fieldsValue.minRange !== undefined &&
          fieldsValue.minRange !== null &&
          fieldsValue.minRange !== ''
        ) {
          if (
            fieldsValue.maxRange === undefined ||
            fieldsValue.maxRange === null ||
            fieldsValue.maxRange === ''
          ) {
            message.error({
              content: formatMessage({ id: 'app.dm.product.property.info.maxrange.place' }),
              key: 1,
            });
            return;
          }
          if (fieldsValue.maxRange <= fieldsValue.minRange) {
            message.error({
              content: formatMessage({
                id: 'app.dm.product.property.info.maxrange.must.greater.than.minrange',
              }),
              key: 1,
            });
            return;
          }
        }
        if (
          fieldsValue.maxRange !== undefined &&
          fieldsValue.maxRange !== null &&
          fieldsValue.maxRange !== ''
        ) {
          if (
            fieldsValue.minRange === undefined ||
            fieldsValue.minRange === null ||
            fieldsValue.minRange === ''
          ) {
            message.error({
              content: formatMessage({ id: 'app.dm.product.property.info.minrange.place' }),
              key: 1,
            });
            return;
          }
          if (fieldsValue.maxRange <= fieldsValue.minRange) {
            message.error({
              content: formatMessage({
                id: 'app.dm.product.property.info.maxrange.must.greater.than.minrange',
              }),
              key: 1,
            });
            return;
          }
        }

        fieldsValue.range =
          fieldsValue.minRange !== undefined &&
          fieldsValue.minRange !== null &&
          fieldsValue.minRange !== '' &&
          fieldsValue.maxRange !== undefined &&
          fieldsValue.maxRange !== null &&
          fieldsValue.maxRange !== ''
            ? `${fieldsValue.minRange}~${fieldsValue.maxRange}`
            : undefined;

        dispatch({
          type: 'product/addProp',
          payload: {
            productId: params.id,
            name: fieldsValue.name,
            label: fieldsValue.label,
            dataTypeId: fieldsValue.dataTypeId,
            unitId: fieldsValue.unitId,
            range: fieldsValue.range,
            desc: fieldsValue.desc,
          },
          childForm,
          handleModalVisible,
        });
      } else if (type === '2') {
        dispatch({
          type: 'product/addProp',
          payload: {
            productId: params.id,
            name: fieldsValue.name,
            label: fieldsValue.label,
            dataTypeId: fieldsValue.dataTypeId,
            unitId: fieldsValue.unitId,
            range: fieldsValue.range,
            desc: fieldsValue.desc,
          },
          childForm,
          handleModalVisible,
        });
      } else if (type === '3') {
        dispatch({
          type: 'product/addProp',
          payload: {
            productId: params.id,
            name: fieldsValue.name,
            label: fieldsValue.label,
            dataTypeId: fieldsValue.dataTypeId,
            unitId: fieldsValue.unitId,
            range: fieldsValue.range,
            desc: fieldsValue.desc,
          },
          childForm,
          handleModalVisible,
        });
      }
    };
    const showForm = () => {
      if (showFormIndex === '1') {
        return (
          <ProductFunctionProp
            wrappedComponentRef={childForm => {
              this.formRef = childForm;
            }}
          />
        );
      }
      if (showFormIndex === '2') {
        return <ProductFunctionService />;
      }
      if (showFormIndex === '3') {
        return <ProductFunctionEvent />;
      }
      return null;
    };
    const okHandle = () => {
      form.validateFields((error, value) => {
        if (error) return;
        const childForm = this.formRef.getItemsValue();
        childForm.validateFields((err, fieldsValue) => {
          if (err) return;
          handleAdd(value.fun, fieldsValue, childForm);
        });
      });
    };
    return (
      <Modal
        title={formatMessage({ id: 'app.dm.product.function.add' })}
        destroyOnClose
        visible={modalVisible}
        width={618}
        onCancel={() => handleModalVisible()}
        onOk={okHandle}
      >
        <div style={{ width: 530, paddingLeft: 44 }}>
          <FormItem
            label={formatMessage({ id: 'app.dm.product.function.add.functionType' })}
            colon={false}
          >
            {form.getFieldDecorator('fun', {
              rules: [{ required: true }],
              initialValue: showFormIndex,
            })(
              <Radio.Group onChange={handleSizeChange}>
                <Radio.Button value="1">
                  <FormattedMessage id="app.dm.product.function.table.functionType.prop" />
                </Radio.Button>
                <Radio.Button value="2">
                  <FormattedMessage id="app.dm.product.function.table.functionType.service" />
                </Radio.Button>
                <Radio.Button value="3">
                  <FormattedMessage id="app.dm.product.function.table.functionType.event" />
                </Radio.Button>
              </Radio.Group>,
            )}
          </FormItem>
          {showForm()}
        </div>
      </Modal>
    );
  }
}
export default ProductFunctionForm;
